<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>易买网 - 首页</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/function.js"></script>

</head>
<body>
<div id="header" class="wrap">
    <div id="logo"><img src="images/logo.gif"/></div>
    <div class="help"><a href="#" class="shopping">购物车</a><a href="login.html">登录</a><a href="register.html">注册</a><a
            href="guestbook.html">留言</a></div>
    <div class="navbar">
        <ul class="clearfix">
            <li class="current"><a href="#">首页</a></li>
            <li><a href="#">图书</a></li>
            <li><a href="#">百货</a></li>
            <li><a href="#">品牌</a></li>
            <li><a href="#">促销</a></li>
        </ul>
    </div>
</div>
<div id="childNav">
    <div class="wrap">
        <ul class="clearfix">
            <li class="first"><a href="#">音乐</a></li>
            <li><a href="#">影视</a></li>
            <li><a href="#">少儿</a></li>
            <li><a href="#">动漫</a></li>
            <li><a href="#">小说</a></li>
            <li><a href="#">外语</a></li>
            <li><a href="#">数码相机</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">秋冬靴</a></li>
            <li><a href="#">运动鞋</a></li>
            <li><a href="#">美容护肤</a></li>
            <li><a href="#">家纺用品</a></li>
            <li><a href="#">婴幼奶粉</a></li>
            <li><a href="#">饰品</a></li>
            <li class="last"><a href="#">Investor Relations</a></li>
        </ul>
    </div>
</div>
<div id="register" class="wrap">
    <div class="shadow">
        <em class="corner lb"></em>
        <em class="corner rt"></em>
        <div class="box">
            <h1>欢迎注册易买网</h1>
            <ul class="steps clearfix">
                <li class="current"><em></em>填写注册信息</li>
                <li class="last"><em></em>注册成功</li>
            </ul>
            <form id="regForm" method="post" action="UserRegServlet" onsubmit="return checkForm(this);">
                <table>
                    <tr>
                        <td class="field">用户名：</td>
                        <td><input class="text" type="text" name="userName" onfocus="FocusItem(this)"
                                   onblur="CheckItem(this);" id="name"/><span id="spanname"></span></td>
                    </tr>
                    <tr>
                        <td class="field">登录密码：</td>
                        <td><input class="text" type="password" id="passWord" name="passWord" onfocus="FocusItem(this)"
                                   onblur="CheckItem(this);"/><span></span></td>
                    </tr>
                    <tr>
                        <td class="field">确认密码：</td>
                        <td><input class="text" type="password" name="rePassWord" onfocus="FocusItem(this)"
                                   onblur="CheckItem(this);"/><span></span></td>
                    </tr>
                    <tr>
                        <td class="field">注册手机号：</td>
                        <td>
                            <input type="text" name="phoneNumber" id="phoneNumber" class="text"
                                   onfocus="FocusItem(this)"
                                   onblur="CheckItem(this);"/>
                            <input type="button" class="btn btn-default " value="点击获取验证码" id="getCode"
                                   onclick="gettime(this);"/>
                            <span id="span1"></span>
                        </td>

                    </tr>
                    <tr>
                        <td class="field">验证码：</td>
                        <td>
                            <input class="text" type="text" name="veryCode" onfocus="FocusItem(this)"
                                   onblur="checkVeryCode(this)" id="veryCode"/>
                            <span id="span2"></span>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><label class="ui-green"><input type="submit" name="submit" value="提交注册"/></label></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="clear"></div>
</div>
<div id="footer">
    Copyright &copy; 2010 北大青鸟 All Rights Reserved. 京ICP证1000001号
</div>
</body>
</html>
<script>

    var veryCode;
    $(function () {
        var getVeryCode = function () {
            $.ajax({
                type: "POST",
                url: "UserPhoneNumberVerifyServlet",
                data: {
                    phoneNumber: $("#phoneNumber").val()
                },
                dataType: "JSON",
                success: function (data) {
                    if (data.code != null) {
                        $("#span1").html("验证码发送,请及时验证");
                        veryCode = data.code;
                    } else {
                        $("#span1").html("验证码获取失败,请重新获取验证码");
                    }
                }
            });
        };
        /*执行点击获取验证码*/
        $("#getCode").on("click", function () {
            getVeryCode();
        });

        /*注册时name保证name不重复*/
        var veryName = function () {
            $.ajax({
                type: "POST",
                url: "UserRegNameVeryServlet",
                data: {
                    name: $("#name").val()
                },
                success: function (data) {

                    if (data == "true") {
                        $("#spanname").html("用户名正确有效");
                    } else {

                        document.getElementById("spanname").className = "error";
                        $("#spanname").html("用户名已经被注册");

                    }
                }
            });
        };

        $("#name").on("blur", function () {
            veryName();
        });

    });
    /*验证码2min失效*/
        var x=120;
        function gettime(obj) {
            if(x==0){
                obj.value="重新获取验证码";
                obj.removeAttribute("disabled");
                x=120;
                return;
            }else{
                obj.value="剩余"+x+"秒,请及时验证!";
                obj.setAttribute("disabled",true);
                x--;
            }
            setTimeout(function () { gettime(obj) },1000);
        }

    /* 检测验证码是否输入成功*/
    function checkVeryCode(obj) {
        if (obj.value != null) {
            if (obj.value == veryCode) {
                obj.parentNode.getElementsByTagName("span")[0].innerHTML = "验证码正确";
            } else {
                obj.parentNode.getElementsByTagName("span")[0].innerHTML = "验证码不正确";
                obj.parentNode.getElementsByTagName("span")[0].className = "error";
            }
        } else {
            obj.parentNode.getElementsByTagName("span")[0].innerHTML = "不能为空";
            obj.parentNode.getElementsByTagName("span")[0].className = "error";
        }
    }


</script>
